<template>
    <div>
        <h1>一个人的信息</h1>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>工作种类：{{job.type}}</h2>
        <h2>工作薪水：{{job.salary}}</h2>
        <button @click="sayHello">hello</button>
        <button @click="changeInfo">更新人的信息</button>

    </div>
</template>

<script>

// import {h} from "vue";

import {ref} from "vue";

export default {
    name: 'App',
    setup(){
        let name = ref('张三');
        let age = ref(20);
        let job = ref({
            type: "前端工程师",
            salary: '30k'
        });
        function sayHello(){
            alert(`Hello World! 我是${name}，年龄${age}`);
        }
        function changeInfo(){
            name.value = '李四';
            age.value = 18;
            job.value.type = "UI工程师";
            job.value.salary = '20k';
            console.log(name,age);
        }
        return {
            name,
            age,
            job,
            sayHello,
            changeInfo
        }

    },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
